body, input {
   font-family: helvetica, arial, sans-serif;
   font-size: 13px;
   background: #fff;
}

#controls {
  position: absolute;
  left: 0;
  width: 280px;
  top: 64px;
  bottom: 0;
}

#map_canvas {
  position: absolute;
  left: 280px;
  right: 0;
  top: 64px;
  bottom: 0;
}

#logo {
  position: absolute;
  left: 10px;
  right: 0;
  background-repeat: no-repeat;
}


/* Main logo styles (choose one of three options here). */

#logo {  /* The standard Google Earth Engine logo. */
  background-image: url(http://earthengine.googlelabs.com/images/logo_earthEngine_dotorg.png);
  top: 14px;
  height: 50px;
}

#logo {  /* The Google and Imazon logos together. */
  background-image: url(../img/google-imazon.png);
  top: 0;
  height: 64px;
}

#logo {  /* The Imazon logo alone. */
  background-image: url(../img/imazon.png);
  top: 0;
  height: 64px;
}


#tagline {  /* A "powered by" tag line on the right. */
  position: absolute;
  top: 44px;
  right: 6px;
  white-space: nowrap;
  font-size: 11px;
}

#tagline, #tagline a {
  color: #444;
  text-decoration: none;
}

#tagline img {
  border: none;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-left: -2px;
  margin-right: -2px;
}

#controls h2 {  /* Section headings in the control sidebar. */
  font-size: 13px;
  font-weight: normal;
  background-color: #e8ecf9;  /* Google Maps: light toolbar blue. */
  background-color: #d5ddf3;  /* Google Maps: dark toolbar blue. */
  background-color: #e3e9ff;  /* Gmail: selection highlight. */
  padding: 5px 10px;
  margin: 0;
}

#controls div.section {
  padding: 8px 10px 16px;
}

#date_range input {
  width: 72px;
}


/* Results list layout. */

#results {
  border-top: 1px solid #ddd;
  overflow-y: auto;  /* Scrollbar inside the results list. */
}

#results_table {
  width: 100%;
}

#results_table td {
  padding: 3px 6px 3px 10px;
  cursor: pointer;
}

#results_table td:hover {
  background: #e3e9ff;
}

#results_table td.selected {
  background: #bcf;
}


/* Button styles. */
.button {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  font-size: 13px; margin: 3px 0 0; padding: 2px 6px;
  -webkit-border-radius: 3px; border: 1px solid #c0c0c0;
  background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#e3e3e3));
}
.button:hover { border: 1px solid #909090; }
.button.depressed {
  background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#e3e3e3), to(#f9f9f9));
}

/* Shadow styles. */
.hshadow, .vshadow { position: absolute; left: 280px; top: 64px; }
.hshadow { right: 0; background: #000; }
.vshadow { bottom: 0; background: #000; }
.hs1 { height: 1px; opacity: 0.15; filter: alpha(opacity=15); }
.hs2 { height: 2px; opacity: 0.12; filter: alpha(opacity=12); }
.hs3 { height: 3px; opacity: 0.09; filter: alpha(opacity=9); }
.hs4 { height: 4px; opacity: 0.06; filter: alpha(opacity=6); }
.hs5 { height: 6px; opacity: 0.03; filter: alpha(opacity=3); }
.vs1 { width: 1px; opacity: 0.15; filter: alpha(opacity=15); }
.vs2 { width: 2px; opacity: 0.12; filter: alpha(opacity=12); }
.vs3 { width: 3px; opacity: 0.09; filter: alpha(opacity=9); }
.vs4 { width: 4px; opacity: 0.06; filter: alpha(opacity=6); }
.vs5 { width: 6px; opacity: 0.03; filter: alpha(opacity=3); }


.infowindow h3 { margin: 0 0 1em; }
